<template>
  <el-form :inline="true" :model="formData" class="demo-form-inline">
    <el-form-item label="分类">
      <el-tree-select
        v-model="formData.categoryId"
        :data="data"
        :render-after-expand="false"
      />
    </el-form-item>
    <el-form-item label="名称">
      <el-input v-model="formData.name" placeholder="请输入名称" />
    </el-form-item>
    <el-form-item label="编号">
      <el-input v-model="formData.id" placeholder="请输入编号" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">查询</el-button>
    </el-form-item>
  </el-form>

  <el-table :data="tableData">
    <el-table-column fixed prop="id" label="编号" />
    <el-table-column fixed prop="name" label="名称" />
    <el-table-column prop="img" label="图片">
      <template #default="scope">
        <el-image style="width: 50px; height: 50px" :src="scope.row.img" />
      </template>
    </el-table-column>
     <el-table-column prop="price" label="价格" width="80">
            <template #default="scope">
                ¥ {{ scope.row.price }}
            </template>
    </el-table-column>
    <el-table-column prop="subTitle" label="副标题" width="300" />
    <el-table-column prop="sort" label="排序" />
    <el-table-column fixed="right" label="操作">
      <template #default="scope">
        <el-button type="primary" size="small" @click="edit(scope.row)"
          >编辑</el-button
        >
        <el-button type="danger" size="small" @click="del(scope.row)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>

  <!-- 分页工具条 -->
  <div class="demo-pagination-block">
    <el-pagination
      v-model:current-page="pageData.currentPage"
      v-model:page-size="pageData.pageSize"
      :page-sizes="[5, 10, 30, 50]"
      :small="false"
      :disabled="false"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageData.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, reactive } from "vue";
import { categoryApi, productApi } from "@/api/index";
import { ro } from "element-plus/es/locale";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRoute, useRouter } from "vue-router";
//路由
const route = useRoute(); //用于获取当前页面的参数
const router = useRouter(); //用于页面的跳转

//表格数据
const tableData = ref([]);

//条件查询
const formData = reactive({
  id: "",
  name: "",
  categoryId: "",
});

//分类数据
const data = ref([]);

//分页数据
const pageData = reactive({
  currentPage: "1",
  pageSize: "5",
  total: 10,
});

//钩子函数
onMounted(() => {
  getProductList();
  //查询分类
  getCategoryList();
});

//处理页数大小改变
const handleSizeChange = (pageSize: any) => {
  pageData.pageSize = pageSize;
  getProductList();
};

//处理当前页改变
const handleCurrentChange = (currentPage: any) => {
  pageData.currentPage = currentPage;
  getProductList();
};

//查询所有商品的数据
const getProductList = () => {
  productApi.selectPage
    .call({
      id: formData.id,
      name: formData.name,
      categoryId: formData.categoryId,
      pageSize: pageData.pageSize,
      currentPage: pageData.currentPage,
    })
    .then((res: any) => {
      tableData.value = res.records;
      pageData.currentPage = res.current;
      pageData.pageSize = res.size;
      pageData.total = res.total;
      console.log(res);
    });
};



//提交查询表单数据
const onSubmit = () => {
  getProductList();
  console.log(formData.categoryId)
};

//查询分类列表
const getCategoryList = () => {
  categoryApi.getCategoryTree.call().then((res: any) => {
    res.forEach((item) => {
      item.value = item.id;
      item.label = item.name;
    });
    data.value = data.value.concat(res);
  });
};

//删除商品数据
const del = (row: any) => {
  ElMessageBox.confirm("删除后无法恢复，确认删除?", "Warning", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    productApi.delete
      .call({ id: row.id })
      .then((res: any) => {
        ElMessage.success("删除成功");
        //刷新表格数据
        getProductList();
      })
      .catch(() => {
        ElMessage({
          type: "info",
          message: "Delete canceled",
        });
      });
  });
};

//编辑商品
const edit = (row: any) => {
  router.push({ name: "product-edit", query: { id: row.id } }); //页面跳转
};
</script>
